<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Sample4: Ext.ux.google.map.StaticMap</title>
    <script src="../extcore/ext-core.js" type="text/javascript"></script>
    <script src="../map/Ext.ux.google.map.StaticMap.js" type="text/javascript"></script>
    <script type="text/javascript">
      Ext.onReady(function(){
        var cfg = {
          lat: 0,
          lng: 0,
          width: 180,
          height: 180,
          span: {
            lat: 2,
            lng: 2
          },
          type: 'satellite',
          key: 'ABQIAAAA3HEaipgCJKasbKv8S1gdbBQRwYGrJs7PTc23wXYGvCkgV6rZmhSdnrJh9Xe77AdhJyXWHiwWb8t7pA'
        };

        for(var i=0; i<5; i++){
          for(var j=0; j<5; j++){
            var lat = (Math.random() - 0.5) * 180;
            var lng = (Math.random() - 0.5) * 360;

            Ext.ux.google.map.StaticMap.generate(Ext.applyIf({
              lat: lat,
              lng: lng
            }, cfg)).appendTo(Ext.getBody());
          }
        }

      });
    </script>
  </head>
  <body>
  <h1>70% of eath's surface is water!</h1>
  </body>
</html>
